<template>
    <div ref="chart">
    </div>
</template>

<script>
export default {
    data() {
        return {
            myChart: null
        }
    },
    props: {
        xData: {
            type: Array,
            default: () => []
        },
        yData: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: '在Vue中使用echarts'
        }
    },
    methods: {
        initCharts() {
            if (this.myChart === null) {
                this.myChart = this.$echarts.init(this.$refs.chart);
            }
            // 绘制图表
            this.myChart.setOption({
                color: ['#ee6666', '#9a60b4', '#ea7ccc'],
                title: { text: this.title },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {},
                xAxis: {
                    data: this.xData
                },
                yAxis: {},
                series: this.yData.map(item => {
                    item.type = 'line'
                    item.stack = 'Total'
                    item.areaStyle = {
                        shadowColor: '#000',
                    }
                    return item
                })
            });
        }
    },
    watch: {
        xData: {
            handler: function () {
                this.initCharts()
            },
            deep: true
        }
    }

}
</script>

<style lang="less" scoped>
div {
    width: 100%;
    height: 100%;
}
</style>